# ChunksToHermesBytecode Plugin

## Overview

`ChunksToHermesBytecodePlugin` is a webpack plugin designed to convert JavaScript chunks into [Hermes](https://hermesengine.dev/) bytecode for performance optimization.
It also converts related source maps to be compatible with bytecode bundles.

:::caution
This plugin is only meant to be run when bundling for production. It does not work during development.
:::

The plugin hooks into the `assetEmitted` event of the webpack compilation process. If the plugin is enabled and the asset file matches the given rules, it will be converted into Hermes bytecode. If source maps exist for the asset, they are also processed and updated.

## Options

- `enabled`: Use this to enable/disable the plugin.
- `test`, `include`, and `exclude`: Use these to determine which files the plugin will process.
- `hermesCLIPath`: Use this to specify the path to the Hermes command-line tool.
  If not specified, the plugin will try to find it automatically.
- `reactNativePath`: Use this to specify the path to the React Native package.
  If not specified, the plugin will try to find it automatically.
- `compareBeforeEmit`: Use this to force enable `compareBeforeEmit` Webpack's output option.

:::info
This plugin will only transform assets that are emitted after the compilation.
To ensure that asset is always emitted we disable the `compareBeforeEmit` option
which is enabled by default in Webpack.

`compareBeforeEmit` option is used to skip emitting assets that are identical to the
ones present in build directory, which might result in transformation being
skipped when there is a untransformed bundle present in the build directory.
:::

## Usage

To use `ChunksToHermesBytecodePlugin`, you need to instantiate it and add it to your webpack configuration's `plugins` array. Here's a simple example:

```js
// webpack.config.mjs
import * as Repack from '@callstack/repack';

// ...
plugins: [
  new Repack.plugins.ChunksToHermesBytecodePlugin({
    enabled: mode === 'production' && !devServer,
    test: /\.(js)?bundle$/,
    exclude: /index.bundle$/,
  }),
];
```

:::caution
If you enable Hermes in your project, your `index.bundle` file and it's source-map will be transformed by `react-native`.
You should exclude it from the plugin to avoid processing it twice.
:::

In the example above, the plugin is enabled only for production builds when bundling with `webpack-bundle`.
It will process any files that end in `.jsbundle` or `.bundle`, but it will exclude `index.bundle`.
